import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";

// class App extends React.Component {
//   state = {
//     count: 0,
//   };

//   componentDidMount() {
//     // 写副作用
//     setInterval(() => {
//       this.setState((prevState) => {
//         return {
//           count: prevState.count + 1,
//         };
//       });
//     }, 1000);
//   }

//   render() {
//     return (
//       <div>
//         <h1>App</h1>
//         <p>count：{this.state.count}</p>
//       </div>
//     );
//   }
// }

function Hello(props) {
  // 1. 初始化执行一次
  // 2. props.count 发生改变时再执行
  useEffect(() => {
    console.log("Hello - useEffect");
  }, [props.count]);

  return (
    <div>
      <h1>Hello - {props.name}</h1>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("张三");

  // 这个回调默认会执行一次，
  // 如果依赖项发生变化，会再次执行
  //    1. 第二个参数没有传递的话，state、props 的变化都会引起这个回调函数的再次执行
  //    2. 第二个参数传递一个有值的[], 传递 [count] 代表只有在 count 改变时才会重新触发回调
  //    3. 第二个参数传递一个空数组，这个回调函数将只会在默认触发一次
  useEffect(() => {
    console.log("App - useEffect");

    setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
  }, []);

  return (
    <div>
      <h1>App</h1>
      <p>count：{count}</p>
      <button
        onClick={() => {
          setCount((prevCount) => prevCount + 1);
        }}
      >
        count++
      </button>
      <button
        onClick={() => {
          setName("李四");
        }}
      >
        修改name
      </button>

      <hr />
      <Hello name={name} count={count} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
